<template>
    <div class="home">
        <div style="margin-bottom: 10px;">
            <el-button @click="deleteByIds" size="mini">删除</el-button>
        </div>
        <el-table ref="multipleTable" :data="mails" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="from" label="发件人" width="300"></el-table-column>
            <el-table-column prop="subject" label="主题" width="500"></el-table-column>
            <el-table-column prop="date" label="时间"></el-table-column>
            <el-table-column prop="id" label="操作">
                <template slot-scope="scope">
                    <el-button style="margin-right: 10px;" size="mini" @click="jmp(scope.row.id)">查看</el-button>
                    <el-button size="mini" type="danger" @click="deleteById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: 'MyMailbox',
    data() {
        return {
            http: 'https://localhost:7235',
            mails: [],
            multipleSelection: [],
            dialogFormVisible: false,
            newdialogFormVisible: false,
        }
    },
    methods: {
        jmp(id) {
            this.$router.push({
                name: 'mail',
                params: {
                    id: id
                }
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        selectAll() {
            axios
                .get(`${this.http}/Emails/all`, {
                    params: {
                        addr: localStorage.getItem('addr'),
                        pass: localStorage.getItem('pass'),
                    },
                    headers: {
                        'Accept': 'text/plain',
                    }
                })
                .then((response) => {
                    this.mails = response.data
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        deleteByIds() {
            this
                .$confirm("此操作将永久删除该邮件", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    let arr = []
                    this.multipleSelection.forEach(e => { arr.push(e.id) })
                    axios
                        .delete(`${this.http}/Emails/delete`, {
                            params: {
                                addr: localStorage.getItem('addr'),
                                pass: localStorage.getItem('pass'),
                            },
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            data: arr
                        })
                        .then(() => {
                            this.selectAll()
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                })
                .catch(() => {
                    this.$message({ type: "info", message: "已取消删除" });
                });
        },
        deleteById(id) {
            this
                .$confirm("此操作将永久删除该邮件", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    axios
                        .delete(`${this.http}/Emails/delete`, {
                            params: {
                                addr: localStorage.getItem('addr'),
                                pass: localStorage.getItem('pass'),
                            },
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            data: [id]
                        })
                        .then(() => {
                            this.selectAll()
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                })
                .catch(() => {
                    this.$message({ type: "info", message: "已取消删除" });
                });
        },
    },
    mounted() {
        this.selectAll()
    }
}
</script>

<style scoped>
.home {
    width: 100%;
    max-height: 100%;
    padding: 20px;
    height: 100%;
    overflow: auto;
}
.func {
    width: 37%;
    height: 300px;
    padding: 10px;
    margin-left: 30px;
    border-radius: 14px;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.el-dialog {
    width: 36%;
}
.func .el-input {
    margin-top: 30px;
    width: 60%;
    height: 40px;
}
.func .res {
    width: 60%;
    height: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 22px;
}
.func .el-button {
    width: 50%;
    height: 40px;
}
.search {
    padding-bottom: 8px;
}
.search .el-input {
    width: 26%;
    padding: 0 18px;
}
.search span {
    color: #606060;
}
</style>